<template>
  <el-dialog
    v-model="dialogVisible"
    title="用户登录"
    width="400px"
  >
    <el-form
      ref="form"
      :model="form"
      label-width="100px"
    >
      <el-form-item
        key="username"
        label="用户名"
        prop="username"
        :rules="[{ required: true, message: '请输入username', trigger: 'blur' }]"
      >
        <el-input
          v-model="form['username']"
          type="text"
        />
      </el-form-item>
      <el-form-item
        key="password"
        label="密码"
        prop="password"
        :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]"
      >
        <el-input
          v-model="form['password']"
          type="text"
        />
      </el-form-item>
    </el-form>
    <el-alert
      v-if="errorMsg"
      :title="'保存失败！' + errorMsg"
      type="error"
      :closable="true"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button
          type="success"
          @click="submitForm"
        >
          确定
        </el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
// import { ElNotification } from 'element-plus'
import account  from '../api/account.js'
// import { jwt } from '../utils/jwt.js'


export default {
  name: "LoginDialog",
  data() {
    return {
      // 对话框显示状态
      dialogVisible: false,
      // 对话框对象
      form: {
        username: 'user',
        password: '123456'
      },
      errorMsg: '',
      errorDetail: {}
    }
  },
  methods: {
    handleLogin() {
      this.dialogVisible = true
    },
    submitForm() {
      account.login(this.form).then(
          res => {
            console.debug(res)
            this.dialogVisible = false
          }
      ).catch(err => {
        console.debug(err)
        this.errorMsg = '登录失败，用户名或密码错误'
      })
    }
  }
}
</script>

<style scoped>

</style>